<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>接口调用数据展示</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <div class="header">
      <div class='container'>
          <p>深度视觉 · <span>接口调用统计</span></p>
      </div>
  </div>
    <div class='main'>
		<div class='container'>
            <div class="row">
                <div class="col-sm-2">
                    <div class="jk-menu" data-spy="affix" data-offset-top="80">
                    </div>
                </div>
                <div class="col-sm-10">
                    <div class="table-con">
                        <div class="table-responsive">
                            <table class="table table-hover table-bordered">
                                <thead>
                                 <tr><th>日期</th><th>接口调用量</th><th>操作</th></tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                            <div class="loading"><img src="js/loading.gif">加载中</div>
                            <div class="getmore">
                                <button class="btn btn-danger refresh" >刷新</button> <button class="btn more" disabled>加载更多</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
	</div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
    <script>
        var jkName = $('.jk-menu a').eq(0).text(); //接口名称
        //接口名:type  当前页page  接口名：api_type
        $(".jk-menu").on('click','a',function(){
            $(".loading").removeClass('out');
            $(this).addClass('on').siblings().removeClass('on');
            $("table tbody").empty();
            page = 1;
            jkName = $(this).text();
            getData(page,jkName);
        });
        //刷新
        $('.refresh').on('click',function () {
            $(".jk-menu a.on").click();
        });
        //加载更多
        $("button.more").on('click',function(){
            $(this).attr('disabled', true);
            page++;
            getData(page,jkName,true);
        });


    </script>
  </body>
</html>